<template>
    <div class="navbtmbox" v-if="offshow">
        <ul>
            <li :class="{nav_active:status==0}" @click="turnUrl('/productList')">
                <div class="nav_1"></div>
                <p>推广赚钱</p>
            </li>
            <li :class="{nav_active:status==4}" @click="turnUrl('/message')">
                <div class="nav_4"></div>
                <p>我的消息</p>
            </li>
            <li :class="{nav_active:status==1}" @click="turnUrl('/cusTomer')">
                <div class="nav_2"></div>
                <p>我的客户</p>
            </li>
            <li :class="{nav_active:status==2}" @click="turnUrl('/perSon')">
                <div class="nav_3"></div>
                <p>个人中心</p>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "navTab",
        data() {
            return {
                offClass: true,
                status: 0,
                offshow:true
            }
        },
        props: ['navStatus'],
        computed:{
            count(){
                return this.navStatus;
            }
        },
        mounted(){

            let aurl = sessionStorage.navStatus;
            if(this.$route.path=="/"||this.$route.path=="/productList"){
                sessionStorage.navStatus = "/";
                this.changestatus("/");
            }else{
                if(aurl){
                    this.changestatus(aurl);
                }else{
                    this.offshow = false;
                }
            }
            if(location.href.indexOf('download')!=-1){
                this.offshow = false;
            }
        },
        watch: {
            count(val, oldVal){
                this.changestatus(val);
            }
        },
        methods: {
            changestatus(dtatus){
                switch (dtatus) {
                    case "/cusTomer":
                        this.status = 1;
                        this.offshow = true;
                        break;
                    case "/perSon":
                        this.status = 2;
                        this.offshow = true;
                        break;
                    case "/productList":
                        this.status = 0;
                        this.offshow = true;
                        break;
                    case "/":
                        this.status = 0;
                        this.offshow = true;
                        break;
                    case "/message":
                        this.status = 4;
                        this.offshow = true;
                        break;
                    default:
                        this.status = 0;
                        this.offshow = false;
                        sessionStorage.removeItem("navStatus");
                        break;
                }
            },
            turnUrl(ourl) {
                sessionStorage.navStatus = ourl;
                switch (ourl) {
                    case "/productList":
                        break;
                    case "/":
                        break;
                    case "/cusTomer":
                        break;
                    case "/perSon":
                        break;
                    case "/message":
                        break;
                    default:
                }
                this.$router.push({path: ourl, query: {selected: "2"}});
            }
        }
    }
</script>

<style scoped lang="less">
    .navbtmbox {
        width: 100%;
        height: 0.98rem;
        position: fixed;
        left: 0;
        bottom: 0;
        background: #fff;

        ul {
            overflow: hidden;
            width: 100%;
            height: 0.98rem;

            .nav_active p {
                color: rgba(38, 119, 249, 1);
            }

            .nav_active .nav_1 {
                background: url("../img/nav_share.png") center center no-repeat;
                background-size: 100% auto;
            }

            .nav_active .nav_2 {
                background: url("../img/nav_customer.png") center center no-repeat;
                background-size: 100% auto;
            }

            .nav_active .nav_3 {
                background: url("../img/nav_person.png") center center no-repeat;
                background-size: 100% auto;
            }

            .nav_active .nav_4 {
                background: url("../img/xiaoxi1.png") center center no-repeat;
                background-size: 100% auto;
            }

            li {
                float: left;
                width: 25%;
                height: 0.98rem;
                cursor: pointer;

                div {
                    width: 0.42rem;
                    height: 0.42rem;
                    margin: 0.12rem auto 0.05rem auto;
                }

                .nav_1 {
                    background: url("../img/nav_share1.png") center center no-repeat;
                    background-size: 100% auto;
                }

                .nav_2 {
                    background: url("../img/nav_customer1.png") center center no-repeat;
                    background-size: 100% auto;
                }

                .nav_3 {
                    background: url("../img/nav_person1.png") center center no-repeat;
                    background-size: 100% auto;
                }

                .nav_4 {
                    background: url("../img/xiaoxi.png") center center no-repeat;
                    background-size: 100% auto;
                }

                p {
                    text-align: center;
                    font-size: 0.24rem;
                    font-weight: 500;
                    color: rgba(163, 163, 163, 1);
                }
            }
        }
    }
</style>
